import React, { useEffect } from "react";
import { Card } from "antd";
import "./css/userStatistics.scss";
// import { DollarTwoTone } from "@ant-design/icons";

import ReactEcharts from "echarts-for-react";
import * as echarts from "echarts";
import chinaMapData from "../../assets/china.json"; // 你存放下载地图数据文件的路径
import {
  BorderBox11,
  DigitalFlop,
  Decoration9,
  BorderBox8,
  ScrollBoard,
} from "@jiaminghi/data-view-react";
// 注册中国地图
echarts.registerMap("china", chinaMapData);

export default function Users() {
  //初始化地图

  // 生成echarts配置
  const getOption = () => ({
    // width: "80%",
    tooltip: {
      trigger: "item",
      formatter: "{b}<br/>{c} (人)",
    },
    visualMap: {
      min: 0,
      max: 5000,
      left: "10%",
      top: "65%",
      text: ["高", "低"],
      calculable: true,
      inRange: {
        color: ["#e0ffff", "#006edd"],
      },
    },
    series: [
      {
        name: "中国",
        type: "map",
        mapType: "china",
        roam: true,
        center: [100, 33],
        label: {
          show: true,
          color: "rgba(0,0,0,0.7)",
        },
        itemStyle: {
          areaColor: "#cfe6e8",
          borderColor: "#111",
        },
        data: [
          { name: "北京", value: Math.round(Math.random() * 1000) },
          { name: "天津", value: Math.round(Math.random() * 1000) },
          {
            name: "河北省",
            value: Math.round(Math.random() * 1000),
          },
          { name: "河南省", value: Math.round(Math.random() * 1000) },
          { name: "山东省", value: Math.round(Math.random() * 1000) },
          { name: "山西省", value: Math.round(Math.random() * 1000) },
          // ... 其他省市数据
        ],
        zoomTo: "latest",
        scaleLimit: [0.5, 2],
      },
    ],
  });

  useEffect(() => {
    // 此处将地图数据与人员分布数据进行绑定加载
  }, []);

  function formatter(number: Array<number>) {
    const numbers = number.toString().split("").reverse();
    const segs = [];

    while (numbers.length) segs.push(numbers.splice(0, 3).join(""));

    return segs.join(",").split("").reverse().join("");
  }

  const enterpriseCustomerConfig = {
    number: [654321],
    content: "{nt}人",
    formatter,
  };

  const ScrollBoardConfig = {
    header: ["列1", "列2", "列3"],
    data: [
      ["行1列1", "行1列2", "行1列3"],
      ["行2列1", "行2列2", "行2列3"],
      ["行3列1", "行3列2", "行3列3"],
      ["行4列1", "行4列2", "行4列3"],
      ["行5列1", "行5列2", "行5列3"],
      ["行6列1", "行6列2", "行6列3"],
      ["行7列1", "行7列2", "行7列3"],
      ["行8列1", "行8列2", "行8列3"],
      ["行9列1", "行9列2", "行9列3"],
      ["行10列1", "行10列2", "行10列3"],
    ],
  };

  return (
    <div className="user-container">
      {/* 企业用户 */}
      <div className="enterprise-customer">
        <Card className="enterprise-customer-digital-flop">
          <h2>企业用户总人数</h2>
          <DigitalFlop config={enterpriseCustomerConfig} />
        </Card>
        <ScrollBoard
          config={ScrollBoardConfig}
          style={{ width: "200px", height: "160px" }}
        />
        <Card className="enterprise-customer-proportion">
          <h2>企业人数占比</h2>
          <Decoration9 style={{ width: "130px", height: "130px" }}>
            66%
          </Decoration9>
        </Card>
      </div>
      {/* 人员分布 */}
      <BorderBox11 className="personnel-distribution" title="人员分布">
        <ReactEcharts
          className="map"
          option={getOption()}
          style={{ height: "490px", width: "550px" }}
          // notMerge={true}
          // lazyUpdate={true}
          // theme={"theme_name"}
        />
      </BorderBox11>
      {/* 个人用户 */}
      <div className="personal-customer">
        <Card className="personal-customer-digital-flop">
          <h2>个人用户总人数</h2>
          <DigitalFlop config={enterpriseCustomerConfig} />
        </Card>
        <ScrollBoard
          config={ScrollBoardConfig}
          style={{ width: "200px", height: "160px" }}
        />
        <Card className="personal-customer-proportion">
          <h2>个人人数占比</h2>
          <Decoration9 style={{ width: "130px", height: "130px" }}>
            66%
          </Decoration9>
        </Card>
      </div>
    </div>
  );
}
